<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>图片文本-居中</title>
    <style>
        .container {
            position: relative;
        }

        .center {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            text-align: center;
            font-size: 18px;
            margin-top: -9px;
        }

        img {
            width: 100%;
            height: auto;
            opacity: 0.3;
        }
    </style>
</head>

<body>

    <h2>图片文本</h2>
    <p>在图片中间位置添加文本信息:</p>

    <div class="container">
        <img src="images/trolltunga.jpg" alt="Norway" width="1000" height="300">
        <div class="center">居中</div>
    </div>

</body>

</html>